<template>
	<view class="adup-route-bz">
		<u-form :model="fm.ps" :ref="fm.fname" :rules="rules" :error-type="['toast']">
			<view class="my-fm" :style="{'padding-top': '0rpx'}">
				<view class="f-item no-box" :style="{'padding-top': '85rpx'}">
					<view class="f-item-title"
						:style="{'position': 'fixed', 'top': '-4rpx', 'width': 'calc(100% - 50rpx)', 'padding-left': '20rpx'}">
						<label class="r-l-icon" :style="{'background': '#ff6300', 'left': '0rpx'}"></label>
						线下派车
						<view class="r-r-con">
							<u-button :hover-class="'none'" :custom-style="fm.sb.cancleBtnSy" @click="closeMd">
								<u-icon name="arrow-leftward" color="#ff6300"></u-icon>返回
							</u-button>
							<u-button :ripple="true" :hover-class="'none'" :custom-style="fm.sb.okBtnSty"
								:loading="fm.sb.load" @click="submitFm">
								<u-icon name="edit-pen-fill" color="#fff"></u-icon>提交
							</u-button>

							
						</view>
					</view>

					<u-form-item prop="carcompen">
						<view @click="show = true" class="i-row">
							<view class="r-title">车队:</view>
							<view class="r-con">
								<u-input @click="show = true" v-model="fm.ps.carcompen" :type="'select'"
									:input-align="'right'" :clearable="false" :custom-style="{'color': '#00C3CE'}"
									placeholder="请选择车队" />
							</view>
						</view>
					</u-form-item>
					

					<u-form-item prop="carName">
						<view class="i-row">
							<view class="r-title">业务负责人:</view>
							<view class="r-con">
								<u-input disabled v-model="fm.ps.carName" :type="'select'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入业务负责人'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="carphone">
						<view class="i-row">
							<view class="r-title">负责人电话:</view>
							<view class="r-con">
								<u-input disabled v-model="fm.ps.carphone" :type="'select'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入负责人电话'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="plateNum">
						<view class="i-row">
							<view class="r-title">车牌号:</view>
							<view class="r-con">
								<u-input v-model="fm.ps.plateNum" :type="'text'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入车牌号'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="driverName">
						<view class="i-row">
							<view class="r-title">师傅姓名:</view>
							<view class="r-con">
								<u-input v-model="fm.ps.driverName" :type="'text'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入师傅姓名'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="driverPhone">
						<view class="i-row">
							<view class="r-title">师傅电话:</view>
							<view class="r-con">
								<u-input v-model="fm.ps.driverPhone" :type="'digit'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入师傅电话'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="outPrice" v-if="carCompanyId_off">
						<view class="i-row">
							<view class="r-title">派单价格:</view>
							<view class="r-con">
								<u-input v-model="fm.ps.outPrice" :type="'digit'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" :placeholder="'请输入派单价格'" />
								<label class="i-r-text">元</label>
							</view>
						</view>
					</u-form-item>


				</view>
			</view>
		</u-form>

		<view class="picker_css" v-if="show">
			<view style="display: flex;justify-content: space-around;margin-top: 10rpx;">
				<view style="width: 70vw;">
					<u-input @input="onChange" v-model="curval1" border='true' :placeholder="'请输入关键字搜索并选择'"
						:maxlength="30" :margin="'16rpx'" @change="onChange"></u-input>
				</view>
				<view style="width: 20vw;">
					<u-button @click="onChange" type="primary">搜索</u-button>
				</view>
			</view>
		
			<view v-if='findComboCusList.length >0' class="list-content">
				<view class="point-item" v-for="(it, index) in findComboCusList" :key="index" :data-obj="it"
					@click="picker_confirm1(it)">
					<view class="point-name">
						<u-icon name="map" :color="'#00c3ce'" size="20"></u-icon>
						{{it.cusCompanySimpleName}}
					</view>
					<view class="point-address">{{it.cusRealName+'-'+it.cusPhone}}</view>
					<!-- 	<u-icon class="point-collect" size="40" name="star" color="#999"></u-icon> -->
				</view>
			</view>
			<view v-else class="list-content">
				<view style="font-weight: 700;margin-top: 200rpx;font-size: 60rpx;text-align: center;">
					暂无数据,</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "offline-vehicle-dispatch",


		data() {
			return {
				curval1: '',
				carCompanyId_off: true,
				id: '',
				type:'0',
				// 维修详情输入框样式
				inpBtnStyl: {
					'color': '#00C3CE',
					'padding-right': '30rpx'
				},
				// 车队列表
				findComboCusList: [],
				show: false,
				// 表单对象
				fm: {
					fname: 'offlinevehicledispatch',
					sb: {
						load: false,
						text: '添加',
						okBtnSty: {
							'background-color': '#00C3CE',
							'color': '#FFFFFF',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						},
						cancleBtnSy: {
							'color': '#ff6300',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						}
					},
					// 参数对象
					ps: {
						carcompen: '',
						carName: '',
						carphone: '',


						carCompanyId: '',
						carDutyUserId: '',
						driverName: '',
						driverPhone: '',
						outPrice: '',
						plateNum: '',
						type:'0',
					},

				},
				// 验证对象
				rules: {

					carcompen: [{
						required: true,
						message: '请选择车队',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					carName: [{
						required: true,
						message: '请输入业务负责人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					carphone: [{
						required: true,
						message: '请输入负责人电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					plateNum: [{
						required: true,
						message: '请输入车牌号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					driverName: [{
						required: true,
						message: '请输入师傅姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					driverPhone: [{
						required: true,
						message: '请输入师傅电话',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					outPrice: [{
						required: true,
						message: '请输入派单价格',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},


			}
		},


		mounted() {
			let that = this
				that.curval1 = '',
			that.$u.api.findComboCusList({
				page: {
					pageNum: 1,
					pageSize: 999,
				},
				find: that.curval1,
				cusTypeMark: 'CARTEAM',
			}).then(res => {
				if (res.code == 1) {
					that.findComboCusList = res.data
					let carCompanyId = uni.getStorageSync('carCompanyId');
					if (carCompanyId.id) {
						that.carCompanyId_off = false
						let ps = that.fm.ps
						ps.carCompanyId = carCompanyId.carCompanyId
						ps.driverPhone = carCompanyId.driverPhone
						ps.driverName = carCompanyId.driverName
						ps.plateNum = carCompanyId.plateNum
						ps.outPrice = carCompanyId.outPrice
						for (let i = 0; i < res.data.length; i++) {

							if (ps.carCompanyId == res.data[i].id) {
								ps.carDutyUserId = res.data[i].userId
								ps.carcompen = res.data[i].cusCompanyName
								ps.carphone = res.data[i].cusPhone
								ps.carName = res.data[i].cusRealName
							}
						}
					}

				}
			});
		},
		created() {


		},
		onReady() {
			this.$refs.offlinevehicledispatch.setRules(this.rules);
		},
		onLoad(e) {
			let that = this
			
			

			that.type = e.type
			that.id = e.id
			
		},
		methods: {
			// 关闭弹框
			closeMd() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 选择车队
			picker_confirm1(e) {
				// let that = this
				// that.fm.ps.teamUserIdDeal = e.userId
				// that.fm.teamUserIdDeal = e.cusCompanySimpleName
				
				let that = this
				console.log(that.findComboCusList)
				for (let i = 0; i < that.findComboCusList.length; i++) {
					if (e.id == that.findComboCusList[i].id) {
						let data = that.findComboCusList[i]
					
						that.fm.ps.carcompen = data.cusCompanyName
						that.fm.ps.carName = data.cusRealName
						that.fm.ps.carphone = data.cusPhone
						that.fm.ps.carCompanyId = data.id
						that.fm.ps.carDutyUserId = data.userId
					}
				}
				
				that.show = false
			},
			
			// actionSheetCallback(e) {
			// 	let that = this
			// 	console.log(that.findComboCusList)
			// 	for (let i = 0; i < that.findComboCusList.length; i++) {
			// 		if (e[0].value == that.findComboCusList[i].id) {
			// 			let data = that.findComboCusList[i]
			// 			console.log(data)
			// 			that.fm.ps.carcompen = data.cusCompanyName
			// 			that.fm.ps.carName = data.cusRealName
			// 			that.fm.ps.carphone = data.cusPhone
			// 			that.fm.ps.carCompanyId = data.id
			// 			that.fm.ps.carDutyUserId = data.userId
			// 		}
			// 	}
			// },
			
			onChange() {
				let that = this
				that.$u.api.findComboCusList({
					page: {
						pageNum: 1,
						pageSize: 999,
					},
					find: that.curval1,
					cusTypeMark: 'CARTEAM',
				}).then(res => {
					if (res.code == 1) {
						that.findComboCusList = res.data
						let carCompanyId = uni.getStorageSync('carCompanyId');
						if (carCompanyId.id) {
							that.carCompanyId_off = false
							let ps = that.fm.ps
							ps.carCompanyId = carCompanyId.carCompanyId
							ps.driverPhone = carCompanyId.driverPhone
							ps.driverName = carCompanyId.driverName
							ps.plateNum = carCompanyId.plateNum
							ps.outPrice = carCompanyId.outPrice
							for (let i = 0; i < res.data.length; i++) {
			
								if (ps.carCompanyId == res.data[i].id) {
									ps.carDutyUserId = res.data[i].userId
									ps.carcompen = res.data[i].cusCompanyName
									ps.carphone = res.data[i].cusPhone
									ps.carName = res.data[i].cusRealName
								}
							}
						}
			
					}
				});
			},

			submitFm() {
				let that = this,
					U = that.U,
					FV = that.FV,
					fm = that.fm,
					ps = U.scopy(fm.ps),
					sb = fm.sb;
				that.$refs[fm.fname].validate((valid) => {
					if (!valid) {
						return false;
					} else {

						let carCompanyId = uni.getStorageSync('carCompanyId');
						uni.removeStorageSync('carCompanyId');
						if (carCompanyId.id) {
							ps.id = that.id
							sb.load = true;
							that.$u.api.changeUnder(ps).then((res) => {
								sb.load = false;

								if (res.code == 1) {
									if (that.type == '0') {
										let tabs_page = {
											tabs1: 2,
											tabs2: 1,
											tabs3: 1, // 拼车接天府
										}
										uni.setStorageSync('tabs_page', tabs_page);
									} else {
										let tabs_page = {
											tabs1: 2,
											tabs2: 2,
											tabs3: 1, // 拼车接天府
										}
										uni.setStorageSync('tabs_page', tabs_page);
									}
									let timer = null
									uni.$u.toast(res.msg);
									clearTimeout(timer)
									timer = setTimeout(() => {
										uni.reLaunch({
											url: '/pages/tabbar/order-list/order-list'
										});
										clearTimeout(timer)
									}, 1000)

								} else {
									uni.showToast({
										icon:'none',
										title:res.msg,
										duration: 2000
									});
								}
							}).catch(err => {
								sb.load = false;
							});
						} else {
							console.log(that.id)
							let id = null
							if (that.id.indexOf(",") !== -1) {
								id = that.id.split(',')
							} else {
								id = [that.id]
							}
							
							ps.ids = id
							sb.load = true;
							that.$u.api.offlineDispatchCar(ps).then((res) => {
								sb.load = false;

								if (res.code == 1) {
									if (that.type == '0') {
										let tabs_page = {
											tabs1: 2,
											tabs2: 1,
											tabs3: 1, // 拼车接天府
										}
										uni.setStorageSync('tabs_page', tabs_page);
									} else {
										let tabs_page = {
											tabs1: 2,
											tabs2: 2,
											tabs3: 1, // 拼车接天府
										}
										uni.setStorageSync('tabs_page', tabs_page);
									}
									let timer = null
									uni.$u.toast(res.msg);
									clearTimeout(timer)
									timer = setTimeout(() => {
										uni.reLaunch({
											url: '/pages/tabbar/order-list/order-list'
										});
										clearTimeout(timer)
									}, 1000)

								} else {
									uni.showToast({
										icon:'none',
										title:res.msg,
										duration: 2000
									});
								}
							}).catch(err => {
								sb.load = false;
							});
						}


					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.picker_css {

		width: 100vw;
		height: 100vh;
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
	}

	.list-content {
		height: calc(100vh - 150rpx);
		overflow: auto;
		margin-top: 10rpx;

		.point-item {
			border-bottom: 2rpx solid #efefef;
			line-height: 44rpx;
			padding: 10rpx 60rpx 10rpx 20rpx;
			position: relative;

			.point-name {
				display: flex;
				font-weight: 600;
				font-size: 30rpx;
				color: #333;
			}

			.point-address {
				color: #999;
				font-size: 26rpx;
			}

			.point-collect {
				top: calc((100% - 40rpx)/2);
				right: 20rpx;
				position: absolute;
			}
		}
	}
</style>